<template>
  <div id="ArticlesList">
    <div v-if="Articles.length!==0">
      <div v-for="(Article,index) in Articles.slice(pageSize*currentPage-1,pageSize*currentPage)" :key="index" :index="index">
        <div class="left"  v-if="Article.image===''||Article.image===null">
          <div class="noimg">
            <h2 @click="gotoarticle(Article.aid)">{{Article.title}}</h2>
            <div class="design" style="float: left">
              <i class="iconfont icontouxiang"></i>&nbsp;{{Article.specialist.specialistName}}&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{Article.releaseDateStr}}
            </div>
            <p @click="gotoarticle(Article.aid)">{{Article.description}}</p>
            <div class="design" style="float: left">
              <i class="iconfont iconcai1"></i>&nbsp;暂定&nbsp;&nbsp;
              <i class="iconfont iconbaoyibaoxian"></i>&nbsp;{{Article.hugs}}&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="iconfont iconyueduliang"></i>{{Article.views}}&nbsp;&nbsp;
              <i class="iconfont iconpinglun"></i>暂定
            </div>
          </div>
        </div>
        <div class="left" v-else>
          <div class="img"><img :src="Article.image" alt="" style="width: 200px;height: 120px"></div>
          <div class="context">
            <h2 @click="gotoarticle(Article.aid)">{{Article.title}}</h2>
            <p @click="gotoarticle(Article.aid)">{{Article.description}}</p>
            <div class="design">
              <div style="float: left;padding: 0 5px">
                <i class="iconfont icontouxiang"></i>&nbsp;{{Article.specialist.specialistName}}&nbsp;&nbsp;&nbsp;&nbsp;发布时间：{{Article.releaseDateStr}}
              </div>
              <div style="float: right;padding: 0 5px">
                <i class="iconfont iconcai1"></i>&nbsp;暂定&nbsp;&nbsp;
                <i class="iconfont iconbaoyibaoxian"></i>&nbsp;{{Article.hugs}}&nbsp;&nbsp;
                <i class="iconfont iconyueduliang"></i>&nbsp;{{Article.views}}&nbsp;&nbsp;
                <i class="iconfont iconpinglun"></i>&nbsp;暂定
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="Articles.length"
          :page-size="pageSize"
          :current-page.sync="currentPage">
        </el-pagination>
      </div>
      <div class="right"></div>
    </div>
    <div class="nocontext" v-else>
      暂无贴子
    </div>
  </div>
</template>

<script>
  export default {
    name: "ArticlesList",
    data () {
      return {
        Articles: [],
        currentPage: 1,
        pageSize: 1
      }
    },
    watch: {
      $route(route){
        this.init()
      }
    },
    mounted () {
     this.init()
    },
    methods: {
      gotoarticle(aid) {
        this.$router.push('/article/'+aid)
      },
      init () {
        this.$http({
          method: 'post',
          url: '/article/findArticlesByType',
          data: this.$route.params.type_id
        }).then(res => {
          this.Articles = res.data
        }).catch(err => {
          console.log(err);
        })
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
      }
    }
  }
</script>

<style scoped>
  #ArticlesList{
    width: 1200px;
    margin: 40px auto;
    padding: 10px 15px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  }
  .left{
    width: 870px;
    overflow: auto;
    padding: 5px 0;
    margin-bottom: 5px;
    border-bottom: #d0cece6e solid 1px;
  }
  .left .noimg{
    /*height: 120px;*/
    width: 850px;
    padding: 0 5px;
    overflow: auto;
  }
  .noimg h2{
    margin: 0;
  }
  .noimg p{
    padding: 10px 0;
    margin-bottom: 0;
  }
  .left .img{
    width: 200px;
    height: 120px;
    float: left;
  }
  .left .context{
    float: left;
    width: 650px;
    height: 120px;
    margin-left: 7px;
  }
  .context h2, .noimg h2{
    font-size: 18px;
    color: #ff6347;
  }
  .context h2{
    margin-top: 3px;
  }
  .context p, .noimg p{
    font-size: 14px;
    color: #999999;
    margin-top: 19px;
    margin-left: 10px;
  }
  .context  .design{
    width: 100%;
    height: 20px;
  }
  .design{
    font-size: 12px;
    color: #778899;
    margin: 5px 0;
  }
  .right{
    width: 320px;
    height: 150px;
    border: tomato solid 1px;
    float: right;
    position:fixed;
    right:160px;
    top: 155px
  }
  .nocontext {
    text-align: center;
    color: #999;
    font-size: 24px;
  }
</style>
